<template>
  <div>
    <el-dialog
      :visible.sync="shellDialogVisible"
      width="30%"
      :before-close="closeDialog"
    >
      <span>
        <h3>*{{ $t("hostDialog.title.shell") }}</h3>
        <el-steps
          style="margin: 40px 0"
          :active="active"
          finish-status="success"
          process-status="finish"
          align-center
        >
          <el-step
            :title="$t('hostDialog.form.step') + '1'"
            :description="$t('hostDialog.form.step1')"
          ></el-step>
          <el-step
            :title="$t('hostDialog.form.step') + '2'"
            :description="$t('hostDialog.form.step2')"
          ></el-step>
          <el-step
            :title="$t('hostDialog.form.step') + '3'"
            :description="$t('hostDialog.form.step3')"
          ></el-step>
        </el-steps>
        <!-- 第一步 配置路径 -->
        <el-form
          label-width="80px"
          :model="form"
          :rules="rules"
          ref="urlRef"
          v-show="active == 0"
          :show-message="false"
        >
          <el-form-item
            :label="$t('hostDialog.form.url')"
            label-width="60px"
            prop="url"
          >
            <el-input v-model="form.url" :placeholder="placeholder"></el-input>
          </el-form-item>
        </el-form>
        <!-- 第二步 下载注册文件并执行 -->
        <a
          class="downloadButton"
          download="shell.reg"
          :href="href"
          v-show="active == 1"
        >
          <el-button type="primary">{{ $t("hostDialog.form.run") }}</el-button>
        </a>
        <!-- 第三步 打开Xshell -->
        <!-- <a href="ShellConfig://" v-show="active == 2">
          <el-button type="primary">{{
            $t("hostDialog.form.step3")
          }}</el-button>
        </a> -->
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">{{
          $t("hostDialog.btn.cancel")
        }}</el-button>
        <el-button @click="prev" plain type="primary">{{
          $t("hostDialog.btn.prev")
        }}</el-button>
        <el-button type="primary" @click="save">{{
          active > 1 ? $t("hostDialog.btn.finish") : $t("hostDialog.btn.next")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["shellDialogVisible"],
  data() {
    return {
      placeholder: "Z:\\Xshell 7\\Xshell.exe",
      form: { url: "" },
      href: "",
      active: 0,
      text: "下一步",
      rules: {
        url: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    save() {
      console.log(this.active);
      if (this.active == 0) {
        this.$refs.urlRef.validate((valid) => {
          if (!valid) return;
          // reg文件内容 目的是为了给注册表添加一个能够打开 Xshell 应用的目录
          var blob = new Blob([
            "Windows Registry Editor Version 5.00\n",
            "[HKEY_CLASSES_ROOT\\ShellConfig]\n",
            "@='URL:ShellConfig Protocol Handler'\n",
            '"URL Protocol"=""\n',
            "[HKEY_CLASSES_ROOT\\ShellConfig\\DefaultIcon]\n",
            '@=\\"' + JSON.stringify(this.form.url) + '\\"\n',
            "[HKEY_CLASSES_ROOT\\ShellConfig\\shell]\n",
            "[HKEY_CLASSES_ROOT\\ShellConfig\\shell\\open]\n",
            "[HKEY_CLASSES_ROOT\\ShellConfig\\shell\\open\\command]\n",
            '@=\\"' + JSON.stringify(this.form.url) + '\\"',
          ]);
          this.href = URL.createObjectURL(blob);
          this.active++;
        });
      } else if (this.active == 1) {
        this.active++;
      } else {
        this.active = 0;
        window.localStorage.setItem("Xshell_URL", this.form.url);
        this.form.url = "";
        this.closeDialog();
      }
      // if (this.active++ > 2) this.active = 0;
      // console.log(JSON.stringify(this.form.url));
      // // let str = '"' + JSON.stringify(this.form.url) + ' \\"%1\\"' + '"';
      // // reg文件内容 目的是为了给注册表添加一个能够打开 Xshell 应用的目录
      // var blob = new Blob([
      //   "Windows Registry Editor Version 5.00\n",
      //   "[HKEY_CLASSES_ROOT\\ShellConfig]\n",
      //   "@='URL:ShellConfig Protocol Handler'\n",
      //   '"URL Protocol"=""\n',
      //   "[HKEY_CLASSES_ROOT\\ShellConfig\\DefaultIcon]\n",
      //   "@=" + JSON.stringify(this.form.url) + "\n",
      //   "[HKEY_CLASSES_ROOT\\ShellConfig\\shell]\n",
      //   "[HKEY_CLASSES_ROOT\\ShellConfig\\shell\\open]\n",
      //   "[HKEY_CLASSES_ROOT\\ShellConfig\\shell\\open\\command]\n",
      //   "@=" + JSON.stringify(this.form.url),
      // ]);
      // this.href = URL.createObjectURL(blob);
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    prev() {
      if (this.active >= 0) this.active--;
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang="less" scoped>
</style>